<script setup lang="ts">
import { debounce } from "lodash"
import type { FastOffset, PlacementValue } from "./type"

// todo:弹出层的实现可能导致性能问题
// 展示和隐藏
const show = defineModel<boolean>("show", { default: false })
const debounceShow = ref(false)
watch(
  show,
  debounce((v) => (debounceShow.value = v), 200)
)

// 弹出层展示位置
// todo: 弹出层自动避开边缘
interface Props {
  placement?: PlacementValue
  fastOffset?: FastOffset
}
const { placement = "bottom", fastOffset = "center" } = defineProps<Props>()

const styleObj = computed(() => {
  if (fastOffset === "center") {
    return null
  }
  return fastOffset === "right" ? { right: 0 } : { left: 0 }
})
</script>
<template>
  <Transition name="bili">
    <div v-show="debounceShow" :style="styleObj" class="bili-poppver-content">
      <div class="place-holder"></div>
      <div class="main">
        <slot></slot>
      </div>
    </div>
  </Transition>
</template>
<style lang="less" scoped>
@placeholder-height: 25px;

.bili-poppver-content {
  position: absolute;
  top: 1rem;
  // left: 0;
  .place-holder {
    height: @placeholder-height;
    width: 100%;
  }
  .main {
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
}

.bili-enter-active {
  opacity: 1;
  max-height: 100%;
  transition: 0.2s 0.1s;
}
.bili-enter-from,
.bili-leave-to {
  opacity: 0;
  max-height: 50px;
  transform: translateY(-0.3rem);
  transition: 0.2s;
}
</style>
